<template>
    <div class="index">
        <section class="aboutUs">
            <div class="title">
                <h3>关于我们</h3>
                <p>ABOUT US</p>
                <div class="line"></div>
            </div>
            <ul>
                <template v-for="(item,index) in info">
                    <li v-if="index%2==0">
                        <img :src="item.src">
                    </li>
                    <li>
                        <h3>{{item.nameCH}}</h3>
                        <span>{{item.nameEN}}</span>
                        <p>{{item.info}}</p>
                    </li>
                    <li v-if="index%2!==0">
                        <img :src="item.src">
                    </li>
                </template>
            </ul>
        </section>
        <section class="service">
            <div class="title">
                <h3>服务优势</h3>
                <p>SERVICE ADVANTAGE</p>
                <div class="line"></div>
            </div>
            <el-row :gutter="15">
                <el-col :span="3">
                    <div class="grid-content bg-purple">
                        <div class="icon">
                            <i class="iconfont icon-fuwu"></i>
                        </div>
                        <h3>全新的服务模式</h3>
                        <div class="line"></div>
                        <p>本公司打破传统中介的模式，以客户的利益为核心，不仅仅提供海外就诊预约服务及短期海外服务，我们提供在美7*24全面服务，以及客户治疗结束归国后的健康跟踪、购药、预约复查等服务，让赴美医疗零烦恼。</p>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="grid-content bg-purple">
                        <div class="icon">
                            <i class="iconfont icon-icon170"></i>
                        </div>
                        <h3>权威医疗机构</h3>
                        <div class="line"></div>
                        <p>我们只预约美国排名前十的权威医院，帮您找到一个权威的、适合您自身病情需要的医院。我们拥有丰富的医院医生资源，可直接让患者对接医疗服务，提供权威专业的转诊建议。</p>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="grid-content bg-purple">
                        <div class="icon">
                            <i class="iconfont icon-icon143"></i>
                        </div>
                        <h3>专业医疗咨询及医学翻译</h3>
                        <div class="line"></div>
                        <p>本公司与国内及美国注册执业医生合作，由美国执业医生审核所有病历翻译，确保资料正确性，医生根据客户实际情况综合评估赴美就医可行性，以客户利益为核心。我们提供相关医疗转诊服务，就客户关注的问题，提供最权威专业的资讯服务。</p>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="grid-content bg-purple">
                        <div class="icon">
                            <i class="iconfont icon-feiji"></i>
                        </div>
                        <h3>赴美就医直通车</h3>
                        <div class="line"></div>
                        <p>客户在与我们取得联系后，能以最快的速度，到国外医院看病。</p>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="grid-content bg-purple">
                        <div class="icon">
                            <i class="iconfont icon-earth"></i>
                        </div>
                        <h3>专业语言陪同</h3>
                        <div class="line"></div>
                        <p>可根据客户需求，提供一站式服务，配备具备医疗知识的翻译人员，医疗、生活全程陪同，免除客户语言不通，环境不熟悉带来的困扰。</p>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="grid-content bg-purple">
                        <div class="icon">
                            <i class="iconfont icon-site-copy"></i>
                        </div>
                        <h3>全方位本地化服务</h3>
                        <div class="line"></div>
                        <p>可根据客户需求，提供一站式服务，配备具备医疗知识的翻译人员，医疗、生活全程陪同，免除客户语言不通，环境不熟悉带来的困扰。</p>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="grid-content bg-purple">
                        <div class="icon">
                            <i class="iconfont icon-feiyong"></i>
                        </div>
                        <h3>减免医疗费用</h3>
                        <div class="line"></div>
                        <p>可根据客户需求，提供一站式服务，配备具备医疗知识的翻译人员，医疗、生活全程陪同，免除客户语言不通，环境不熟悉带来的困扰。</p>
                    </div>
                </el-col>
            </el-row>
        </section>
        <section class="process">
            <div class="title">
                <h3>服务流程</h3>
                <p>SERVICE PROCESS</p>
                <div class="line"></div>
            </div>
            <el-row>
                <el-col :span="8">
                    <div class="grid-content">
                        <div class="kefu">
                            <i class="iconfont icon-kefu"></i>
                        </div>
                        <h3>海外医疗咨询与服务</h3>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content">
                        <ul>
                            <li>1、咨询答疑</li>
                            <li>2、委托确认</li>
                            <li>3、病例资料整理</li>
                            <li>4、病例资料翻译</li>
                            <li>5、预约海外医院医生</li>
                            <li>6、签证办理</li>
                            <li>7、海外就医全程服务</li>
                            <li>8、病情随访，药品邮寄</li>
                        </ul>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content">
                        <div class="medc">
                            <i class="iconfont icon-yuanchengwenzhen"></i>
                        </div>
                        <h3>海外专家远程会诊服务</h3>
                    </div>
                </el-col>
            </el-row>
        </section>
    </div>
</template>

<script>
export default {
    data() {
        return {
            info: [
                {
                    'src': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494391454983&di=c273453d68226be82087043cd280e31c&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F13%2F64%2F33%2F65Z58PICPks_1024.jpg',
                    'nameCH': '鸿舟国际健康咨询有限公司', 'nameEN': 'Navicare International Inc.',
                    'info': '本公司专注于美国本地化医疗服务，美国本部位于休斯顿，MD Anderson癌症中心旁，我们专业的医疗服务，让客户体验美国顶尖的医疗，帮助客户轻松实现赴美医疗。 我们提供医疗咨询、转诊预约、短/长期住宿、交通语言等一站式服务，体贴赴美就业的方方面面，让就诊患者专业获得海外专业医疗服务的同时，而不需为其它琐事担心。 此外，本公司还贴心提供在美期间全程医疗生活服务，使客户不仅能在美国得到最好的治疗，也能享受最舒适的生活环境。'
                },
                {
                    'src': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494391454983&di=c273453d68226be82087043cd280e31c&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F13%2F64%2F33%2F65Z58PICPks_1024.jpg',
                    'nameCH': '健康问题', 'nameEN': 'Health Problem',
                    'info': '健康问题涌现，疾病久治不愈，国人的本公司专注于美国本地化医疗服务，美国本部位于休斯顿，MD Anderson癌症中心旁，我们专业的医疗服务，让客户体验美国顶尖的医疗，帮助客户轻松实现赴美医疗。 我们提供医疗咨询、转诊预约、短/长期住宿、交通语言等一站式服务，体贴赴美就业的方方面面，让就诊患者专业获健康已亮起了“红灯”，由于美国有世界公认最发达的医健康问题涌现，疾病久治不愈，国人的健康已亮起了“红灯”，由于美国有世界公认最发达的医疗水平，并且在很多重大疾病领域有权威医疗成果，赴美就医治疗，也成为越来越多中国患者就医的新选择。走出国门，利用更先进的仪器，与更高级的医疗专家对话健康，获得更前沿的医疗成果诊治，让疾病治疗更为从容。'
                },
                {
                    'src': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494391454983&di=c273453d68226be82087043cd280e31c&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F13%2F64%2F33%2F65Z58PICPks_1024.jpg',
                    'nameCH': '赴美就医问题', 'nameEN': 'Medical Problems',
                    'info': '目前中国患者赴美就医，仍面临众多问题。大部分患者只能按照美国医院推荐榜，按图索骥的选择医院，或者由国内医生推荐医院，但自行联系医院，可能会面临就诊是否及时、病症是否合适、能否挑选到优秀医生等问题。一些患者会选择非专业的赴美医疗中介，但仅提供7天海外服务，客户需自行解决语言、住宿问题，让本就繁琐的海外医疗，变得更是焦头烂额。'
                },
            ]
        }
    }
}
</script>

<style lang="less">
.index {
    width: 1336px;
    margin: 0 auto;
    .aboutUs {
        .title {
            h3 {
                margin-bottom: 0;
            }
            p {
                margin: 5px 0 20px 0;
                font-size: 14px;
            }
            .line {
                width: 250px;
                border-top: 1px solid #999;
                margin: 0 auto;
            }
        }
        ul {
            margin: 50px 0;
            li {
                width: 45%;
                display: inline-block;
                vertical-align: top;
                &:nth-child(2) {
                    h3 {
                        color: #1169b8;
                    }
                }
                &:nth-child(3) {
                    h3 {
                        color: #5fbb5d;
                    }
                }
                &:nth-child(6) {
                    h3 {
                        color: #f8b551;
                    }
                }
                &:nth-child(2n+1) {
                    padding-right: 40px;
                    border-right: 1px dotted #333;
                    text-align: right;
                }
                &:nth-child(2n) {
                    margin-left: 40px;
                    text-align: left;
                }
                img {
                    width: 100%;
                    height: 260px;
                }
                h3 {
                    margin-bottom: 5px;
                    font-size: 20px;
                }
                p {
                    text-align: left;
                    line-height: 1.5;
                    margin-bottom: 30px;
                }
            }
        }
    }
    .service {
        .title {
            h3 {
                margin-bottom: 0;
            }
            p {
                margin: 5px 0 20px 0;
                font-size: 14px;
            }
            .line {
                width: 250px;
                border-top: 1px solid #999;
                margin: 0 auto;
            }
        }
        .el-row {
            margin-top: 30px;
            .el-col-3 {
                width: 14%;
            }
            .el-col {
                &:nth-child(1) {
                    .icon {
                        background-color: darken(#e7edf3, 20%);
                    }
                    .line {
                        border: 1px solid darken(#e7edf3, 20%);
                    }
                }
                &:nth-child(2) {
                    .icon {
                        background-color: darken(#f8b551, 0%);
                    }
                    .line {
                        border: 1px solid darken(#f8b551, 20%);
                    }
                }
                &:nth-child(3) {
                    .icon {
                        background-color: darken(#15b58a, 0%);
                    }
                    .line {
                        border: 1px solid darken(#15b58a, 20%);
                    }
                }
                &:nth-child(4) {
                    .icon {
                        background-color: darken(#7ecef4, 0%);
                    }
                    .line {
                        border: 1px solid darken(#7ecef4, 20%);
                    }
                }
                &:nth-child(5) {
                    .icon {
                        background-color: darken(#c490bf, 0%);
                    }
                    .line {
                        border: 1px solid darken(#c490bf, 20%);
                    }
                }
                &:nth-child(6) {
                    .icon {
                        background-color: darken(#f564a5, 0%);
                    }
                    .line {
                        border: 1px solid darken(#f564a5, 20%);
                    }
                }
                &:nth-child(7) {
                    .icon {
                        background-color: darken(#ffc900, 0%);
                    }
                    .line {
                        border: 1px solid darken(#ffc900, 0%);
                    }
                }
                .grid-content {
                    background-color: #e7edf3;
                    height: 400px;
                    margin: 20px 0;
                    padding: 10px;
                    line-height: 1.5;
                    &:hover {
                        background-color: #eb6877;
                        cursor: pointer;
                        color: #fff;
                        .line {
                            border: 1px solid darken(#fff, 0);
                        }
                    }
                    .icon {
                        border-radius: 50%;
                        width: 60px;
                        height: 60px;
                        margin: -40px auto 0 auto;
                        i {
                            font-size: 30px;
                            line-height: 60px;
                            color: #fff;
                        }
                    }
                    h3 {
                        margin: 10px 0;
                        height: 50px;
                        vertical-align: middle;
                        display: inline-block;
                    }
                    p {
                        font-size: 14px;
                        text-align: left;
                    }
                }
            }
        }
    }
    .process {
        .title {
            h3 {
                margin-bottom: 0;
            }
            p {
                margin: 5px 0 20px 0;
                font-size: 14px;
            }
            .line {
                width: 250px;
                border-top: 1px solid #999;
                margin: 0 auto;
            }
        }
        .el-row {
            .el-col {
                .grid-content {
                    height: 250px;
                    margin: 20px 0;
                    background-color: #e7edf3;
                    .kefu {
                        background-color: #fff;
                        width: 80px;
                        height: 80px;
                        border-radius: 50%;
                        margin: auto auto;
                        position: relative;
                        top: 30%;
                        transform: translateY(-30%);
                        i {
                            font-size: 50px;
                            margin: 0 auto;
                            line-height: 80px;
                            color: #4fa0d8;
                        }
                    }
                    .medc {
                        width: 90px;
                        height: 90px;
                        border-radius: 50%;
                        margin: auto auto;
                        position: relative;
                        top: 30%;
                        transform: translateY(-30%);
                        border: 1px solid #333;
                        i {
                            font-size: 50px;
                            margin: 0 auto;
                            line-height: 100px;
                            color: #7e7e7e;
                        }
                    }
                    h3 {
                        color: #fff;
                        margin-top: 70px;
                        font-weight: normal;
                    }
                }
                &:first-child {
                    .grid-content {
                        background-color: #4fa0d8;
                    }
                }
                &:nth-child(2) {
                    .grid-content {
                        border-right: 1px solid #999;
                        ul {
                            width: 100%;
                            margin: 40px auto;
                            text-align: left;
                            float: left;
                            li {
                                display: inline-block;
                                width: 40%;
                                float: left;
                                margin: 10px 22px;
                            }
                        }
                    }
                }
                &:nth-child(3) {
                    h3 {
                        color: #7e7e7e;
                        margin-top: 60px;
                    }
                }
            }
        }
    }
}
</style>